<template>
  <div>
    <van-nav-bar
      :title="
        comment.reply_count > 0 ? `${comment.reply_count}条回复` : '暂无回复'
      "
    >
      <van-icon
        slot="left"
        name="cross"
        @click="$emit('click-close')"
      ></van-icon>
    </van-nav-bar>
    <div class="scroll-warp">
      <CommentItem :comment="comment"></CommentItem>
      <!-- 全部回复 -->
      <van-cell title="全部回复"></van-cell>
      <!-- 回复列表  type不加冒号 意思传的值就是C-->
      <CommentArticle
        :source="comment.com_id"
        type="c"
        :list="commentList"
      ></CommentArticle>
    </div>

    <div class="post-warp">
      <van-button round @click="isReplyComment = true">写评论</van-button>
    </div>
    <!-- 回复评论 -->
    <van-popup v-model="isReplyComment" position="bottom">
      <CommentPost
        :target="comment.com_id"
        @post-success="onPostSuccess"
      ></CommentPost>
    </van-popup>
  </div>
</template>

<script>
import CommentItem from './comment-item.vue'
import CommentArticle from './article-comment.vue'
import CommentPost from './comment-post.vue'
export default {
  components: {
    CommentItem,
    CommentArticle,
    CommentPost
  },
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      isReplyComment: false,
      commentList: []
    }
  },
  created () {},
  methods: {
    onPostSuccess (data) {
      this.comment.reply_count++
      this.isReplyComment = false
      this.commentList.unshift(data.new_obj)
    }
  }
}
</script>

<style scoped lang="less">
.post-warp {
  width: 100%;
  height: 100px;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  .van-button {
    width: 640px;
    height: 80px;
  }
}
.scroll-warp {
  width: 100%;
  position: absolute;
  top: 82px;
  bottom: 100px;
  overflow: scroll;
}
</style>
